<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="utf-8">
		<title>小薇学院任务六</title>
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>
		<header>
			<div class="logo"><span>ife.baidu.com</span></div>
			<span>2017.03</span>
		</header>
		<article class="clearfix about">
			<div id="img-pc">
				<div class="over-left"></div>
				<div class="over-right"></div>
			</div>
			<div class="about-text">
				<header>
					<h1>about</h1>
					<h1>techology</h1>
					<h4>About techology about techology about techology</h4>
				</header>
				<div class="numbers">
					<span class="big-number">700</span>
					<span class="small-number">3.2</span>
					<span class="smaller-number">css</span>
					<span class="smallest-number">sscscscssssscc</span>
				</div>
		</article>
		<article class="clearfix container2">
			<section class="what">
				<header>
					<h4>what</h4>
				</header>
				<span>百度前端技术学院是面向大学生的前端技术学习平台,由百度创办的免费前端技术学习实践、交流、分享平台百度前端技术学院是面向大学生的前端技术学习平台,由百度创办的免费前端技术学习实践、交流、分享平台</span>
			</section>
			<section class="when">
				<header>
					<h4>when</h4>
				</header>
				<span>百度前端技术学院是面向大学生的前端技术学习平台,由百度创办的免费前端技术学习实践、交流、分享平台百度前端技术学院是面向大学生的前端技术学习平台,由百度创办的免费前端技术学习实践、交流、分享平台</span>
			</section>
			<section class="how">
				<header>
					<h4>how</h4>
				</header>
				<span>百度前端</span><br />
				<span>百度前端技术学院</span><br />
				<span>百度</span><br />
				<section class="catalog">
					<span>What--------<span>40%</span></span><br />
					<span>What--------<span>40%</span></span><br />
					<span>What--------<span>40%</span></span>
				</section>
			</section>
		</article>
		<div class="clearfix container3">
			<article class="left">
				<header>
					<hgroup>
						<h1><span>the</span> technology<br />of front</h1>
						<h2>前端技术领域</h2>
					</hgroup>
				</header>
				<article>
					<img src="img/task06_左下.jpg" class="pc-img" />
					<span class="first-ch-word">前</span><p class="first-p">端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端</p>
					<p>前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端</p>
					<p>前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前前端前</p>
				</article>
			</article>
			<div class="right">
				<div class="right-img">
					<footer>
						<div>前端技术</div><span>前端技术前端技术</span>
					</footer>
				</div>
				<div class="right-note">
					<div class="list">
						<ol>
							<li>前端前端前端前端....................<span>前端</span></li>
							<li>前端...............................<span>前端前</span></li>
							<li>前端前端前端前端前端................<span>前端</span></li>
						</ol>
					</div>
					<div class="zero-container">
						<span>0</span>
						<div class="zero-right">
							<h4>one two</h4>
							<h4>three four five</h4>
							<span>hello world hello world hello world</span>
						</div>
					</div>
					<div class="hello">
						<img src="img/db-dot-left.jpg" />
						hello world hello world hello world hello world hello world hello world hello world hello world hello world
						<img src="img/db-dot-right.jpg" />
					</div>
				</div>
			</div>
		</div>
		<footer>
			<span>2017.03</>
		</footer>
	</body>
</html>